<template>
  <div id="headBox" class="pagePersonalCenter">
    <headerT title="我的消息" />
    <div class="pageNormalBackground headMarginTop boxMain" style="heigth:100vh">
      <div v-if="messageList.length!=0">
        <div
          class="everyBlockBgcolor displayFlex list"
          v-for="(item,index) in messageList"
          :key="index"
          @click="toMessageDetail(item.id)"
        >
          <img src="../../../../static/images/systemMessage.png" v-if="item.type==1" alt />
          <img src="../../../../static/images/orderMessage.png" v-if="item.type==2" alt />
          <div class="messageTile">
            <p class="isMessage" v-if="item.type==1">{{item.title}}</p>
            <p class="isMessage" v-if="item.type==2">{{item.title}}</p>
            <p class="messageContent">{{item.content}}</p>
          </div>
        </div>
      </div>
      <div class="noData" v-if="messageList.length==0">暂无数据</div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import { messagesList } from "@/services/personCenter";
export default {
  components: {
    headerT
  },
  name: "",

  data() {
    return {
      messageList: [], //消息列表
      needInfo: {
        page: 1,
        pageSize: 15
      },
      totalPage: 0 //总页数
    };
  },
  created() {
    this.getMessageList();
  },
  watch: {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      //分页加载数据
      if (
        document.documentElement.scrollTop + window.innerHeight >=
        document.body.offsetHeight
      ) {
        if (this.needInfo.page >= this.totalPage) {
          return;
        } else {
          this.needInfo.page = this.needInfo.page + 1;
          this.getMessageList();
        }
      }
    },
    getMessageList() {
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(messagesList, this.needInfo).then(res => {
        this.$vux.loading.hide();
        this.totalPage = res.data.last_page;
        if (this.needInfo.page == 1) {
          this.messageList = res.data.data;
          this.needInfo.page = res.data.current_page;
        } else {
          this.messageList = [...this.messageList, ...res.data.data];
        }
      }).catch(error => {
          this.$vux.loading.hide();
        });
    },
    toMessageDetail(id) {
      //前往详情
      this.$tools.goPage_query("/messageDetail", { id: id });
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css">
.pagePersonalCenter {
  .boxMain {
    padding: 0.52rem 0.3rem;

    .list {
      margin: 0.25rem 0;
      img {
        width: 2.09rem;
        height: 2.09rem;
        margin-right: 0.2rem;
      }

      .messageTile {
        padding-right: 0.47rem;
        width: calc(~"(100% - 3.1rem)");
        .isMessage {
          font-size: 0.34rem;
          color: #4e4e4e;
        }
        .messageContent {
          font-size: 0.32rem;
          color: #747474;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
